<template>
  <div class="containers">
    <div class="canvas" ref="canvas"></div>
  </div>
</template>
<script>
// 由于 bpmn-js官方是适配camunda的，所以对activiti存在不兼容的地方，为了让bpmn-js能使用activiti，需要在BpmnModeler中扩展activiti

// 绘制流程图
import BpmnModeler from "bpmn-js/lib/Modeler"
// 预览流程图
// import BpmnViewer from "bpmn-js/lib/Viewer"
import { xmlStr } from "../mock/xmlStr"
export default {
  name: "hello",
  mounted() {
    this.init();
    // 删除 bpmn logo  bpmn.io官方要求不给删或者隐藏，否则侵权   内部使用
    const bjsIoLogo = document.querySelector('.bjs-powered-by')
    while (bjsIoLogo.firstChild) {
      bjsIoLogo.removeChild(bjsIoLogo.firstChild)
    }

  },
  data() {
    return {
      bpmnModeler: null,
      container: null,
      canvas: null
    }
  },
  methods: {
    init() {
      const canvas = this.$refs.canvas
      this.bpmnModeler = new BpmnModeler({  // 可编辑
      // this.bpmnModeler = new BpmnViewer({
        container: canvas
      })
      this.createNewDiagram()
    },
    createNewDiagram() {
      try {
        const result = this.bpmnModeler.importXML(xmlStr)
        const { warnings } = result
        console.log(warnings)
      } catch (err) {
        console.log(err.message, err.warnings)
      }
    }
  }
}
</script>
<style scoped>
.bjs-powered-by {
  display:none !important;
}
.containers {  width: 100%;  height: calc(100vh - 82px);}.canvas {  width: 100%;  height: 100%;}
</style>